<template>
    <div class="select_dialog_wrap">
        <div class="select_dialog_contain">
            <div class="select_dialog">
                <div class="select_good_info">
                    <div class="good_logo">
                        <el-image v-if="goodInfo.images" fit="cover" :src="this.$config.baseUrl + goodInfo.images[0].file_path"></el-image>
                    </div>
                    <div class="good_price">
                        <p>￥ {{goodInfo && price}}</p>
                        <p>库存 {{goodInfo && inventory}}件</p>
                        <p v-if="select && goodInfo && goodInfo.is_sku">已选: <span v-for="(item,index) in active_value"
                                                                                  :key="index">{{item}}<span
                                v-if="item">，</span></span></p>
                        <p v-if="!select && goodInfo && goodInfo.is_sku">选择: <span v-for="item in goodInfo.attribute"
                                                                                   :key="item.attribute_id">{{item.title}}<span>，</span></span>分类
                        </p>
                    </div>
                </div>
                <div v-if="goodInfo && goodInfo.is_sku" class="select_sku" v-for="(item,index) in goodInfo.attribute"
                     :key="item.attribute_id">
                    <p class="sku_label">{{item.title}}</p>
                    <ul class="sku_main">
                        <li v-for="(child,name) in item.values"
                            :class="active_value[index] === child.attr_value ? 'active_sku sku_value' : 'sku_value'"
                            :style="(is_inventory[name] && (is_inventory[name] === child.attr_value)) ? 'color:#CCCCCC!important;background: rgba(247, 247, 247, 1)!important' : ''"
                            :key="name" @click="handleSelect((is_inventory[name] && (is_inventory[name] === child.attr_value)),name,child.attr_value,index)">
                            {{child.attr_value}}
                        </li>
                    </ul>
                </div>
                <div class="select_sum">
                    <p>购买数量</p>
                    <div class="select_coc">
                        <i @click="handleDecrease" class="el-icon-remove-outline"></i>
                        <p>{{sum}}</p>
                        <!--<input type='number' v-model="sum"></input>-->
                        <i @click="handleAdd" class="el-icon-circle-plus-outline"></i>
                    </div>
                </div>
            </div>
            <div class="select_submit" @click="handlePayMethod">
                确认
            </div>
        </div>

        <div v-if="payMethod">
            <div class="shop_car_dialog_bg" @click="handleCancel"></div>
            <payment @on-handle-cancel="handleCancel" :goodId="goods_id" :sum="sum" :price="price"
                     :sku_mark="sku_mark"></payment>
        </div>
    </div>
</template>

<script>
    import http from '../libs/http';
    import payment from '../components/payment'

    export default {
        name: 'select_sku',
        props: ['goodInfo', 'cocResult'],
        components: {payment},
        data() {
            return {
                active_value: [],
                select: false,
                sku_attr: [],
                is_inventory: [],
                sku_mark: "",
                price: '',
                inventory: '',
                select_over: false,
                sum: 1,
                // attr:[],
                payMethod: false,
                goods_id: "",
            }
        },
        computed: {
            assess() {
                let length = this.goodInfo.sku.length;
                let array = []
                if (length > 0) {
                    for (let i = 0; i < length; i++) {
                        array.push(this.goodInfo.sku[i].price)
                    }
                }
                array.sort(this.sortNumber());
            }
        },
        mounted() {
            this.inventory = this.goodInfo.inventory;
            let length = this.goodInfo.sku.length;
            let array = []
            if (length > 2) {
                for (let i = 0; i < length; i++) {
                    array.push(this.goodInfo.sku[i].price)
                }
                array.sort(function (a, b) {
                    return a - b
                });
                this.price = array[0] + "－" + array[length - 1];
            } else {
                this.price = this.goodInfo.price;
            }

            /*if(this.goodInfo){
                this.apiGet('api/sort/info/' + this.goodInfo.sort_id).then((res) => {
                    console.log(res)
                    this.attr = res.attrs
                });
            }*/
        },
        methods: {
            /*sortNumber(a,b) {
                return a - b
            },*/
            handleSelect(result, childIndex, value, index) {
                if(!result){
                    this.select = true;
                    this.sku_mark = "";
                    this.sku_attr = [];
                    this.$set(this.active_value, index, value);
                    let length = this.active_value.length;
                    for (let i = 0; i < length; i++) {
                        this.sku_attr.push(this.active_value[i])
                    }
                    this.handleSkuAttr(this.sku_attr);
                    let sku = this.goodInfo.attribute.length;
                    let sku_array = [];
                    for (let i = 0; i < sku; i++) {
                        if (i != index) {
                            let sku_value = this.goodInfo.attribute[i].values.length;
                            for (let y = 0; y < sku_value; y++) {
                                let array = []
                                array.push(value)
                                array.push(this.goodInfo.attribute[i].values[y].attr_value)
                                sku_array.push(array.sort().join(','))
                            }
                        }
                    }
                    console.log(sku_array)
                    let values = sku_array.length;
                    let mark = this.goodInfo.sku.length;
                    for (let i = 0; i < values; i++) {
                        for (let y = 0; y < mark; y++) {
                            if ((sku_array[i] == this.goodInfo.sku[y].mark) && (this.goodInfo.sku[y].inventory < 1)) {
                                let a = sku_array[i].replace(new RegExp(value), '').replace(new RegExp(','), '')
                                this.is_inventory.push(a)
                                // this.$set(childArray, childIndex, a);
                            }else if((sku_array[i] == this.goodInfo.sku[y].mark) && (this.goodInfo.sku[y].inventory > 0)){
                                console.log('a')
                                let a = sku_array[i].replace(new RegExp(value), '').replace(new RegExp(','), '')
                                this.is_inventory.splice(a,1)
                            }
                        }
                    }
                }
            },
            handleSkuAttr(array) {
                this.sku_mark = array.sort().join(',');
                let length = this.goodInfo.sku.length;
                for (let i = 0; i < length; i++) {
                    if (this.sku_mark === this.goodInfo.sku[i].mark) {
                        this.select_over = true;
                        this.price = this.goodInfo.sku[i].price;
                        this.inventory = this.goodInfo.sku[i].inventory;
                        break
                    } else {
                        this.select_over = false
                    }
                }
            },
            handleDecrease() {
                if (parseInt(this.sum)> 1) {
                    this.sum = parseInt(this.sum) - 1;
                }
            },

            handleAdd() {
                if (parseInt(this.sum) < parseInt(this.inventory)) {
                    this.sum = parseInt(this.sum) + 1;
                } else {
                    this.$message('沒有库存了')
                }
            },
            handlePayMethod() {
                let data;
                if (this.goodInfo.is_sku) {
                    data = {
                        goods_id: this.goodInfo.goods_id,
                        attrs: this.sku_attr,
                        quantity: this.sum
                    };
                } else {
                    data = {
                        goods_id: this.goodInfo.goods_id,
                        // attrs:this.sku_attr,
                        quantity: this.sum
                    };
                    this.select_over = true
                }
                console.log(data)
                if (this.select_over) {
                    if (this.cocResult === 1) {
                        this.payMethod = true;
                        this.goods_id = this.goodInfo.goods_id
                    } else {
                        this.apiPost('api/cart/add', data).then((res) => {
                            console.log(res)
                            if (res) {
                                this.$message.success('已加入购物车')
                                this.$emit('on-handle-cancel')
                            }
                            /*if(res && this.cocResult === 1){
                                this.payMethod = true;
                                this.goods_id = this.goodInfo.goods_id
                            }else if(res && this.cocResult === 0){
                                this.$message.success('已加入购物车')
                                this.$emit('on-handle-cancel')
                            }*/
                        })
                    }

                }
            },
            handleCancel() {
                this.payMethod = false
            }
        },
        watch: {},
        mixins: [http]

    }
</script>

<style lang="stylus">
    .select_dialog_wrap
        position fixed
        left 0
        bottom 0;
        width 100%
        height 50vh

        .select_dialog_contain
            .select_dialog
                padding 20px 20px 0 20px
                overflow-y auto
                height calc(50vh - 65px)
                background: rgba(255, 255, 255, 1);
                border-radius: 10px 10px 0 0;

                .select_good_info
                    display flex
                    padding-bottom 20px
                    border-bottom 1px solid rgba(241, 241, 241, 1);

                    .good_logo
                        align-self center;
                        margin-right 19px

                        img
                            width: 107px;
                            height: 107px;
                            border-radius: 2px;

                    .good_price
                        align-self center

                        p
                            margin-bottom 10px

                        p:nth-child(1)
                            font-size: 20px;
                            color: rgba(255, 91, 5, 1);

                        p:nth-child(2)
                            font-size: 12px;
                            color: rgba(204, 204, 204, 1);

                        p:nth-child(3)
                            font-size: 12px;
                            color: rgba(51, 51, 51, 1);

                            span:last-child
                                span
                                    display none

                .select_sku
                    padding 13px 0 8px 0
                    border-bottom 1px solid rgba(241, 241, 241, 1)

                    .sku_label
                        font-size: 12px;
                        margin-bottom 14px
                        color: rgba(153, 153, 153, 1);

                    .sku_main
                        .sku_value
                            min-width 58px
                            padding 0 8px
                            height 31px
                            font-size: 13px;
                            line-height 31px
                            margin-right 13px
                            margin-bottom 12px
                            text-align center
                            border-radius: 4px;
                            display inline-block
                            color: #333;
                            background: rgba(247, 247, 247, 1);

                        .active_sku
                            color #fff !important
                            background #3BC7FF

                .select_sum
                    height 54px
                    display flex
                    justify-content space-between

                    p
                        font-size: 12px;
                        align-self center
                        color: rgba(51, 51, 51, 1);

                    .select_coc
                        display flex
                        align-self center

                        i
                            align-self center
                            font-size 20px
                        p
                            text-align center
                            width 65px
                            height 20px
                            line-height 20px
                        .el-input
                            align-self center

                            .el-input__inner
                                width 65px
                                border none
                                height 20px
                                text-align center

            .select_submit
                height: 45px;
                font-size: 19px;
                line-height 45px
                text-align center
                color: rgba(255, 255, 255, 1);
                background: rgba(59, 199, 255, 1);

        .shop_car_dialog_bg
            position fixed
            top: 0;
            left 0;
            right 0
            bottom 0;
            width 100%;
            height 100%;
            overflow hidden
            background-color rgba(0, 0, 0, .5);

</style>
